<template>
  <div class="tzc_sy">
    <!-- {{DATA}} -->
    <div class="tzc_sy_bt">{{DATA.title}}</div>
    <span class="iconfont iconback" @click="prev()">返回</span>
    <Pdf
      class="tzc_sy_pdf"
      :src="DOWNLOAD_URL"
      ref="pdf"
      :page="pageNum"
      :rotate="pageRotate"
      @password="password"
      @progress="loadedRatio = $event"
      @page-loaded="pageLoaded($event)"
      @num-pages="pageTotalNum = $event"
      @error="pdfError($event)"
      @link-clicked="page = $event"
    />
    <div class="tzc_jd">进度：{{pageNum}}/{{pageTotalNum}}</div>
    <div class="btn-def btn-pre" @click.stop="prePage">上一页</div>
    <div class="btn-def btn-next" @click.stop="nextPage">下一页</div>
    <!-- <div class="pdf-tab">
            <div 
            class="btn-def btn-pre"
            @click.stop="prePage">上一页</div>
            <div 
            class="btn-def btn-next"
            @click.stop="nextPage">下一页</div>
            <div 
            class="btn-def"
            @click.stop="clock">顺时针</div>
            <div 
            class="btn-def"
            @click.stop="counterClock">逆时针</div>
            <div 
            class="btn-def"
            @click.stop="pdfPrintAll">全部打印</div>
            <div 
            class="btn-def"
            @click.stop="pdfPrint">部分打印</div>
        </div> -->
  </div>
</template>
<script>
import Pdf from "vue-pdf";
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js';
import { articlelist, articleinfo } from "@/api/api";
export default {
  name: "tzc_sy",
  components: {
    Pdf,
  },
  mounted() {
    this.Booksinfo();
    setTimeout(()=>{
      if(window.location.href.indexOf('#reloaded')==-1){
        window.location.href=location.href+"#reloaded";
        window.location.reload();
      }
    },100);
    // if (this.DOWNLOAD_URL!=='') {
    //   this.DOWNLOAD_URL=='';
    //   this.Booksinfo();
    // }
    // this.PostFYlist();
  },
  data() {
    return {
      guid: this.$route.params.id,
      DOWNLOAD_URL: "",
      DATA: {},
      pageNum: 1,
      pageTotalNum: 1,
      pageRotate: 0,
      // 加载进度
      loadedRatio: 0,
      curPageNum: 0,
    };
  },
  methods: {
    //  获取电纸书在线地址
    Booksinfo() {
      let query = {
        guid: this.guid,
      };
      articleinfo(query)
        .then((res) => {
          this.DATA = res.data.mydata;
          // let P_u='http://192.168.0.10:9901/upfileapi/20210605093103_2572.pdf';
          let p_url=res.data.mydata.file;
          this.DOWNLOAD_URL = Pdf.createLoadingTask({ url:p_url, CMapReaderFactory });
          console.log("pdf地址", this.DOWNLOAD_URL);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    prePage() {
      var p = this.pageNum;
      p = p > 1 ? p - 1 : this.pageTotalNum;
      this.pageNum = p;
    },
    nextPage() {
      var p = this.pageNum;
      p = p < this.pageTotalNum ? p + 1 : 1;
      this.pageNum = p;
    },
    clock(){
      this.pageRotate += 90 
    },
    counterClock(){
      this.pageRotate -= 90 
    },
    password(updatePassword, reason) {
      updatePassword(prompt('password is "123456"'))
      console.log('...reason...')
      console.log(reason)
      console.log('...reason...')
    },
    pageLoaded(e){
      this.curPageNum = e
    },
    pdfError(error){
      console.error(error)
    },
    pdfPrintAll(){
      this.$refs.pdf.print()
    },
    pdfPrint(){
      this.$refs.pdf.print(100,[1,2])
    },
    //返回上一级
    prev() {
      this.$router.go(-2);
    },
  },
};
</script>
<style lang="scss" scoped>
.tzc_sy {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: #f5f7f9;
  position: fixed
}

.tzc_sy_pdf {
  width: 30%;
  height: auto;
  margin: 0 auto;
  margin-top: 2.2rem;
  -moz-box-shadow: 0px 0px 20px #888888; /* 老的 Firefox */
  box-shadow: 0px 0px 20px #888888;
}
.btn-def {
  width: 2.3rem;
  height: 1.2rem;
  background: #743d0d;
  color: white;
  font-size: 16px;
  text-align: center;
  line-height: 1.2rem;
  cursor: pointer;
}
.btn-pre {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.btn-next {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
::-webkit-scrollbar-track-piece {
  //滚动条凹槽的颜色，还可以设置边框属性
  background-color: #f8f8f8;
}
::-webkit-scrollbar {
  //滚动条的宽度
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-thumb {
  //滚动条的设置
  background-color: #d6967f;
  background-clip: padding-box;
  min-height: 28px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #bbb;
}
.iconback {
  line-height: 1.5rem;
  font-size: 20px;
  position: absolute;
  left: 0.5rem;
  top: 0;
  z-index: 100000;
  color: #743d0d;
  cursor: pointer;
  font-weight: 600;
}
.tzc_jd{
line-height: 1.5rem;
  font-size: 20px;
  position: absolute;
  right: 0.5rem;
  top: 0;
  z-index: 100000;
  color: #743d0d;
  cursor: pointer;
  font-weight: 600;
}
.tzc_sy_bt {
  width: 100%;
  height: 2rem;
  line-height: 1.5rem;
  font-size: 25px;
  font-weight: 700;
  color: #743d0d;
  text-align: center;
  background: url(./assets/image/header.png) no-repeat;
  background-size: 100% auto;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
}
.tzc_sy_books {
  width: 100%;
  height: auto;
  padding-top: 2rem;
  .tzc_sy_bookshelf {
    margin-top: 6rem;
    width: 94%;
    height: auto;
    margin-left: 3%;
    background: url(./assets/image/tzc_mj.png) no-repeat;
    background-size: 100% auto;
    z-index: 99;
    .tzc_sy_bookshelf_b {
      z-index: 100;
      width: 10%;
      height: 4rem;
      float: left;
      margin-left: 3.75%;
      margin-top: -40px;
      // clear: both;
      img {
        width: 90%;
        height: auto;
        margin-left: 5%;
        margin-top: -190%;
      }
      div {
        width: 100%;
        text-align: center;
        font-size: 16px;
        color: white;
      }
    }
  }
}
</style>